<template>

     <div class="recharge">

        <div class="header"><van-nav-bar title="交易大厅"  @click-left="$router.go(-1)" /></div>
         <div class="footer_placeholder" id="cust_head" style="width:100%;height:46px"></div>
        <div tab>
            <div  v-if="open_is_sta==0" style="    text-align: center;margin-top: 20%;">
                <p>交易大厅暂时维护啦!</p>
            </div>
            <van-tabs v-model="tran_active" line-width="2rem" @click="on_indx" v-if="open_is_sta==1" >
                <van-tab title="交易">
                    <div class="box1">
                        <div>
                            <div on_1>
                                <div :class="box1_status==1?'enter':''" @click="box1_sta(1)">买入</div>
                                <div :class="box1_status==2?'out':''" @click="box1_sta(2)">卖出</div>
                            </div>
                            <div on_2>
                                <div>
                                    <div class="suffix">AZC</div>
                                    <div>
                                        <van-cell-group>
                                            <van-field v-model="AZC" type="number" @input="input" @blur="blur"  maxlength="6" placeholder="价格" />
                                          </van-cell-group>
                                    </div>

                                </div>
                            </div>
                            <div on_3>
                                <div>≈￥{{price_CNY}}CNY</div>
                            </div>
                            <div on_2>
                                <div>
                                    <div class="suffix"></div>
                                    <div>
                                        <van-cell-group>
                                            <van-field v-model="AZC_number"  type="number" @input="input" maxlength="6" placeholder="数量" />
                                          </van-cell-group>
                                    </div>

                                </div>
                            </div>
                            <div on_3>
                                <div>交易额≈{{count_ACE}}CNY</div>
                            </div>
                            <div on_5>
                                <van-button type="default" @click="sub" :class="box1_status==1?'enter':'out'" >{{box1_status==1?'买入AZC':'卖出AZC'}}</van-button>
                            </div>
                           
                        </div>
                            
                        <div class="statistics">
                                <div>
                                    <div>价格(CNY)</div>
                                    <div>数量(AZC)</div>
                                </div>
                                <!-- <div >
                                    <div price> ---</div>
                                    <div count> ---</div>
                                </div> -->
                                <div v-if="data.mairu.length!=0" style="    justify-content: center;color:#10E082;font-size: .8rem;"  >买入</div>
                                <div v-for="item in data.mairu" style="margin: 0 .8rem;" :data_id="item.id"  @click="initiate_transaction($event,2,item.id,1)">
                                    <div  price v-html="item.price"> </div>
                                    <div  count v-html="item.number" style="    display: flow-root;    text-align: center;"></div>
                                </div>
                               
                                
                                <div  v-if="data.maichu.length!=0" style="    justify-content: center;color:#FF005A;font-size: .8rem;"  >卖出</div>
                                <!-- <div style="justify-content: center;">≈￥1.29CNY</div> -->
                                <div v-for="item in data.maichu" style="margin: 0 .8rem;" :data_id="item.id" @click="initiate_transaction($event,1,item.id,1)">
                                    <div price_low v-html="item.price"> </div>
                                    <div count v-html="item.number"  style="    display: flow-root;    text-align: center;"> </div>
                                </div>
                                
                               
                        </div>
                    </div>
                </van-tab>
                <van-tab title="委托">
                    <div class="box2">
                            
                            <div setting class="setting">
                                <div><span>当前</span><span on>/全部委托</span><van-switch v-model="checked" /></div>
                                <div style="justify-content: flex-end;">
                                    <span><van-button  @click="ontype($event,0,'my')">我的</van-button></span>
                                    <span><img :src="require('../../assets/img/transaction_1.png')" style="width: 1.8rem;"/></span>
                                </div>
                            </div>
                            <div data_list v-show="this.checked!=true" class="settingHeight">
                                <p>数据显示</p>
                                <div class="data_view" v-for="(item, index) in box2_data" @click="initiate_transaction($event,item.type,item.id,item.status)" :style="my_status==0&&item.status==3?'display:none':'display:block'"> 
                                   <div style="border-top: 1px solid #333333;">
                                       <span img><img   :src="item.type==1? require('../../assets/img/transaction_3.png'):require('../../assets/img/transaction_2.png') " /><span v-if="item.type==1">卖出</span><span v-if="item.type==2">买入</span></span><span v-html="item.price"></span> <span v-html="item.number"></span> <span style="flex:2;" v-html="base.formatDate(item.c_time)"></span>
                                       <span v-show="item.status==1" v-html="my_status==0?'待成交':'立即撤销'"  @click="del($event,item.id)"></span>
                                       <span v-show="item.status==2">已成交</span>
                                       <span v-show="item.status==3">已撤销</span>
                                    </div>
                                    <!-- <div> 
                                        <span img><img   :src="require('../../assets/img/transaction_3.png')" />买入</span><span>1.3087</span> <span>898.46</span> <span style="flex:2">12/31/23:24:15</span><span>立即撤销</span>
                                     </div> -->
                                </div>
                                <div v-if="this.box2_data.length==0" style="color: #9c9d9e;text-align: center;    line-height: 3rem;">
                                    没有更多数据了
                                </div>
                            </div>
                          
                            <div class="filter" v-show="this.checked==true" >
                                <p>交易类型</p>
                                <div>
                                    <div ><van-button on="1" @click="ontype($event,0,'type')">全部</van-button></div>
                                    <div><van-button type="default" @click="ontype($event,1,'type')">卖出</van-button></div>
                                    <div><van-button type="default" @click="ontype($event,2,'type')">买入</van-button></div>
                                </div>
                                <p>订单状态</p>
                                <div>
                                    <div><van-button on="1" @click="ontype($event,0,'status')">全部</van-button></div>
                                    <div><van-button @click="ontype($event,1,'status')">待成交</van-button></div>
                                    <div><van-button @click="ontype($event,2,'status')">已成交</van-button></div>
                                    <div><van-button @click="ontype($event,3,'status')">已撤销</van-button></div>
                                </div>

                                <div class="sub">
                                    <div>
                                        <van-button clear type="default" @click="checked=false">取消</van-button>
                                    
                                    </div>
                                    <div>
                                        <van-button sub type="default" @click="entrustlist_medl(-1)">确定</van-button>
                                    </div>
                                </div>
                                
                            </div>
                    </div>

                </van-tab>
                <van-tab title="全球">
                    <div class="box3">
                        <div>
                            <div><img :src="require('../../assets/img/home_5.png')" /></div>
                            <div>
                                <div >AZC</div>
                                <div style="font-size: 0.7rem;">10.86亿</div>
                            </div>
                        </div>
                        <div>
                            <div price>
                                <div>￥{{price_CNY}}</div>
                                <div style="text-align: right;">$0.18</div>
                            </div>
                            <!-- <div>
                                <van-button type="default">-0.09%</van-button>
                            </div> -->
                        </div>
                    </div>
                </van-tab>
             
                <van-tab title="概况">
                    <div class="box4">
                        <div title>发行数据</div>
                        <div>名称<span>亚链世界</span> </div>
                        <div>发行时间<span>2013-5-13</span> </div>
                        <div>发行<span>10.86亿</span> </div>
                        <div>挖矿<span>50%≈5.43亿</span> </div>
                        <div>研发团队<span>10%≈1.086亿</span> </div>
                        <div>战略投资<span>10%≈1.086亿</span> </div>
                        <div>市场运营<span>10%≈1.086亿</span> </div>
                        <div>生态应用<span>20%≈2.172亿</span> </div>
                        <!-- <div>24小时换手<span>74.00%</span> </div> -->
                        <div title>技术模型 </div>
                        <!-- <div>基于以太坊智能合约开发，以及solidity语言编写，属于ZB交 易所的平台币 </div> -->
                         <div>Amazon Coin基于区块链的底层技术原始开发的联盟链。 </div>
                    </div>
                </van-tab>
             
             
              </van-tabs>
        </div>
        <div style="height:50px"></div>
         <v-footer :footer_on="2"></v-footer>
     </div>

        

</template>

<script>
import footer from '../footer/footer'
export default {

data() {
    return {
                tran_active:0,
                AZC:'',
                AZC_number:'1',
                checked: false,
                box1_status:1,
                data:{maichu:[],mairu:[]},
                box2_data:{},
                entrustlist_type:0,
                entrustlist_status:0,
                price_CNY:'',
                count_ACE:'',
                my_status:0,
                open_is_sta:1,
               

    }
},
mounted() { 
   let that=this;
   
    that.base.head_status(1)

    that.price_CNY=parseFloat(JSON.parse(localStorage.userinfo).azcInitial);
   

 
     that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});

     

       that.axios_b.all([that.open_is_tran(),that.show(), that.entrustlist_medl(1)]).then(
           that.axios_b.spread(function (acct, perms) {
              that.$toast.clear();
                   
           
        })
       );
},
components:{
    'v-footer':footer
},
 methods: {
    open_is_tran(){
             let that=this;
      
               var data={token:JSON.parse(localStorage.userinfo).token}
                
                       that._API.closeshall(data).then(res => {
                           
                            if(res.code==200){
                                that.open_is_sta=res.data.status;

                            }
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
    },
    input(){
        let that=this;

         
         that.count_ACE=(that.AZC_number*that.AZC).toFixed(2)


     },
     blur(){
          let that=this;
          var max_count= (parseFloat(that.price_CNY)+(that.price_CNY*0.1)).toFixed(2);
         var min_count=(parseFloat(that.price_CNY)-(that.price_CNY*0.1)).toFixed(2);


        if(that.AZC>max_count){
            that.AZC=max_count;
        }else if(that.AZC<min_count){
             that.AZC=min_count;
        }
         that.count_ACE=(that.AZC_number*that.AZC).toFixed(2)
     },
  box1_sta(sun){
      let that=this;
      that.box1_status=sun;
    
    
  },
  del(elem,uid){
     
      if(window.event.stopPropagation){
          window.event.stopPropagation();      
      }
       let that=this;
       if(that.my_status==0){
           return
       }
       
      
               var data={token:JSON.parse(localStorage.userinfo).token,id:uid}
                
                       that._API.revoke(data).then(res => {
                           
                               that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                    if(res.code==200){
                                        that.show();
                                        that.showMyData();
                                    }
                                });
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });

  },
  show(){
       let that=this;
      
               var data={token:JSON.parse(localStorage.userinfo).token}
                
                       that._API.cashlist(data).then(res => {
                           
                            if(res.code==200){

                                    that.data.maichu=res.data.maichu
                                    that.data.mairu=res.data.mairu;

                                    for(let i=0;i<res.data.maichu.length;i++){
                                         that.data.maichu[i].price=res.data.maichu[i].price
                                         that.data.maichu[i].number=res.data.maichu[i].number
                                    }
                                      for(let i=0;i<res.data.mairu.length;i++){
                                        that.data.mairu[i].price=res.data.mairu[i].price
                                        that.data.mairu[i].number=res.data.mairu[i].number
                                    }
                            }else{
                                that.$toast({ message: res.msg, position: "bottom" });
                            }
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
                  
 },
   entrustlist_medl(isopen){

         let that=this;
          that.checked=false;
        var data={token:JSON.parse(localStorage.userinfo).token,isopen:isopen}
         if(isopen==-1){
              that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});
             data.type=that.entrustlist_type;
             data.status=that.entrustlist_status;
             data.isopen=1;
         }
               
            
                       that._API.entrustlist(data).then(res => {
                           
                            that.$toast.clear()
                                 if(res.code==200){
                                     that.box2_data=res.data;
                                    that.my_status=0;
                                 }else{
                                    
                                      //that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => { });
                                      that.box2_data=[];
                                 }
                         
                          
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
    },
    ontype(elem,num,sta){
         let that=this;
        if(sta=="my"){
           
            if(elem.target.getAttribute("on")=="my"){
                    elem.target.setAttribute("on","-1")
                    that.entrustlist_medl(-1)
                   
             }else{
                    elem.target.setAttribute("on","my")
                    that.showMyData();

            
            }
            return
         }
        var type_divArry=elem.target.parentNode.parentNode.getElementsByTagName("div")
        for(let i=0;i<type_divArry.length;i++){
                    type_divArry[i].getElementsByTagName("button")[0].setAttribute("on",0)
                }
                elem.target.setAttribute("on",1) 
        
        console.log(sta)
        if(sta=="type"){
               
                 that.entrustlist_type=num;
        }else if(sta=="status"){
                
                 that.entrustlist_status=num;
        }


    },
    showMyData(){
              let that=this;
             var data={token:JSON.parse(localStorage.userinfo).token}
              that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});
               that._API.mysalelist(data).then(res => {
                           
                             that.$toast.clear()
                                 if(res.code==200){
                                     
                                       
                                     that.box2_data=res.data;
                                       that.my_status=1; 
                                 }else{
                                       that.box2_data=[];
                                     // that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => { });
                                 }
                         
                          
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
    },
   
 sub(){


      let that=this;


            if(!that.base.empty_b(that.AZC)){
               return  that.$toast({ message: "您还没有输入价格", position: "bottom" });
            }
            if(that.AZC<=0){
                return  that.$toast({ message: "您输入的价格格式不正确", position: "bottom" });     
            }
            if(!that.base.empty_b(that.AZC_number)&&that.AZC_number<=0){
                return that.$toast({ message: "您还没有输入数量", position: "bottom" });
            }
            if(that.AZC_number<=0){
                return  that.$toast({ message: "您输入的数量格式不正确", position: "bottom" });     
            }
          
               var data={token:JSON.parse(localStorage.userinfo).token,price:parseFloat(that.AZC),number:parseInt(that.AZC_number),type:that.box1_status==1?2:1}
            
                   that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});
                       that._API.dealcash(data).then(res => {
                              that.$toast.clear();
                            that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                 if(res.code==200){
                                      that.show();
                                 }
                            });
                          
                             
                         
                        }).catch(err => {  
                            that.$dialog.alert({title: '提示信息', message: "网络链接失败" }).then(() => {});
                        });
 },
 initiate_transaction(elem,type,id,status){
     let that=this;
     if(status==3||status==2){
         return ;
     }
    if(type=="1"){
        this.$router.push({ name: 'transaction_detail',params:{id:id}})
    }else if(type=="2"){
         this.$router.push({ name: 'transaction_initiate',params:{id:id}})
    }
      
 },
 on_indx(num){
     if(num==1){
         setTimeout(function(){
           
              console.log()

              document.getElementsByClassName("settingHeight")[0].style.height=(document.getElementsByTagName("html")[0].offsetHeight-(parseInt(document.getElementById("cust_head").style.height)+document.getElementsByClassName("van-tabs__wrap")[0].offsetHeight+document.getElementsByClassName("setting")[0].offsetHeight+60))+"px"
         },100)
          
     }
     
 }


      }
}
</script>


<style lang="scss" scoped >



    /deep/.van-hairline--bottom{    z-index: 4;position: fixed; width: 100%; background: #190147;   top: 0;}
    /deep/.transfer .van-cell-group, /deep/[tab] .van-tabs__nav, /deep/.van-cell-group,.van-cell{background-color: initial;}
    /deep/.header *, /deep/.van-nav-bar .van-icon, /deep/[tab] .van-ellipsis, /deep/.van-field__control{color:white}
    /deep/.van-field__control::-webkit-input-placeholder { color: white;}
    /deep/.van-tabs__line{background-color: #831BFA;}

    .box1{display: flex;}
    .box1>div{flex:1}
    .box1 [on_1]{display: flex;}
    .box1>div>div{margin:.8rem;display: flex;}
    .box1 [on_1]>div{ flex:1; box-shadow: inset 0 0 1rem 0px #7b00ff;text-align: center;line-height: 2rem;}
    .box1 [on_1]>div:nth-child(1){border-bottom-right-radius: 2rem;}
   .box1 [on_1]>div:nth-child(2){border-top-left-radius: 2rem;}     

   .enter{    background: #FF0036;  border: 0;box-shadow: inset 0 0 1rem 0px #dadada;}

    .out{    background: #07B365;  border: 0;box-shadow: inset 0 0 1rem 0px #d1ffea;}
    .box1 [on_2]>div{display: flex; width: 100%; box-shadow: inset 0 0 1rem 0px #7b00ff;padding: 0 .5rem;line-height: 2rem;align-items: center;position: relative;}  
    /deep/.box1 [on_2] .suffix{position: absolute;right: 1rem;}  
    /deep/.box1 [on_5] .van-button--default{border:0;color: white;width:100%;border-radius: 3rem;}
    .box1 .statistics>div{display: flex;}
    .box1 .statistics>div{display: flex;}
    .box1 .statistics>div>div{flex:1}
    .box1 .statistics [price]{color:#10E082}
    .box1 .statistics [price_low]{color:#FF005A}
    
    .box2 [setting]{display: flex; align-items: center;padding: .3rem .5rem;border-top:1px solid #333333;border-bottom:1px solid #333333;    margin-top: .7rem;}
    .box2 [setting]>div{flex:1;display: flex;align-items: center;}
    .box2 [setting] [on]{font-size: .7rem;color:gray}
    /deep/.box2 .van-switch{    width: 1.5em; height: .7em;    margin-left: .5rem;}
    /deep/.box2 .van-switch__node{    width: 1.4rem;  height: .7em;  }
    /deep/.box2 .van-switch--on{background-color:#831BFA}
    /deep/.box2  .van-button--normal{    background: initial; height: 1.5rem;line-height: 1.4rem; border-radius: 1rem;}
    /deep/.box2 .van-button__text{color: white;font-size: 0.7rem;}
    .box2 [data_list]>p,.box2 .filter p{line-height: 2.5rem;padding: 0 .5rem;color:#00C6FF}
    .box2 .data_view>div{display: flex;padding: 1rem 1rem;border-bottom: 1px solid #333333;} 
    .box2 .data_view span{flex:1;text-align: center;font-size: 0.9rem;}
    .box2 .data_view [img]{display: flex;align-items: center;justify-content: center;}
    .box2 .data_view img{width: 1rem;}
    .box2 .filter p{color:white}
    .box2 .filter>div{display: flex;text-align: center;flex-wrap: wrap;}
    .box2 .filter>div>div{width: 33.3%;margin: .5rem 0;}
    .box2 .filter button{    width: 90%;line-height: 2rem;height: 2rem;border-radius: .2rem;    border: 1px solid #4e4e4e;}
    .box2 .filter [on="1"] {    box-shadow: inset 0 0 1rem 0px #7b00ff;border: 0;}
    .box2 .filter .sub>div{width: 50%;margin-top: 3rem;}
    .box2 .filter .sub button{border-radius: 3rem;border:0; box-shadow: inset 0 0 1rem 0px #7b00ff;line-height: 2.4rem;height: 2.5rem;}
    .box2 .filter .sub [sub]{background-color:#7b00ff ;color:white}
    .box2 .filter .sub [clear]>span{color:#7b00ff}
    .box2 [on="my"]{ border: 1px solid #861CFF;}
    .box2 [on="my"]>span{   color:#861CFF;}


    .box3{display: flex;box-shadow: inset 0 0 1rem 0px #7b00ff;padding: .5rem 1rem;margin: 1rem;}
    .box3>div{    display: flex;align-items: center;}
    .box3>div img{padding-right: .5rem;}
    .box3>div:nth-child(1){flex:1}   
    /deep/.box3 .van-button--default{    background: #07B365; border: 0; color: white;    height: 2rem;line-height: 1.8rem;margin-left:.5rem ;    padding: 0 .5rem;}
    .box3 [price]{font-size: .8rem;}
    .box3 [price]>div:nth-child(1){font-size: 1rem;font-weight: 600; color:#07B365}

   .box4>[title]{color:#00C6FF;font-size: 1rem;border-top:1px solid #2d2121;}
   .box4>div{line-height: 2.5rem;border-bottom:1px solid #2d2121;padding:0 1rem;font-size: 0.8rem;display: flex;}
   .box4>div>span{flex:1;text-align: right;}
   .settingHeight{    overflow: scroll;}
  

</style>
